<!DOCTYPE html>
<html>
<head>
	<title>自动播放一幻灯片效果</title>
	<meta charset="utf-8">
	<style type="text/css">
		body,div,ul,li{margin:0;padding:0;}
		ul{list-style-type:none;}
		body{
			background:#000;
			text-align:center;
			font:12px/20px Arial;
		}

		#box{
			position:relative;
			width:492px;
			height:172px;
			background:#fff;
			border-radius:5px;
			border:8px solid #fff;
			margin:10px auto;
		}
		#box .img-list{
			position:relative;
			width:490px;
			height:170px;
			overflow:hidden;
			border:1px solid #ccc;
		}
		#box .img-list li{
			position:absolute;
			top:0;
			left:0;
			width:490px;
			height:170px;
			opacity:0;
			filter:alpha(opacity=0);
		}
		#box .img-list li.current{
			opacity:1;
			filter:alpha(opacity=100);
		}
		#box .count{
			position:absolute;
			right:0;bottom:5px;
		}
		#box .count li{
			color:#fff;
			float:left;
			width:20px;
			height:20px;
			cursor:pointer;
			margin-right:5px;
			overflow:hidden;
			background:#F90;
			opacity:0.7;
			filter:alpha(opacity=70);
			border-radius:20px;
		}
		#box .count li.current{
			color:#fff;
			opacity:1;
			filter:alpha(opacity=100);
			font-weight:700;
			background:#f60;
		}
	</style>
</head>
<body>
<div id="box">
	<ul class="img-list">
		<li class="current"><img src="img/01.jpg"></li>
		<li><img src="img/02.jpg"></li>
		<li><img src="img/03.jpg"></li>
		<li><img src="img/04.jpg"></li>
		<li><img src="img/05.jpg"></li>
	</ul>
	<ul class="count">
		<li class="current">1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
	</ul>
</div>
<script type="text/javascript">
	window.onload=function(){
		var obox=document.getElementById('box');
		var uls=document.getElementsByTagName('ul');
		var imgs=uls[0].getElementsByTagName('li');
		var lis=uls[1].getElementsByTagName('li');
		var i=index=0;
		var timer=play=null;
		var orderAsc=true;
		//setInterval(slide,1000);
		//function slide(){

		//}
		for(i=0;i<lis.length;i++){
			lis[i].index=i;
			lis[i].onmouseover=function(){
				show(this.index);
			}
		}

		//鼠标划过关闭定时器
		obox.onmouseover = function ()
		{
			clearInterval(play)	;
		};
		
		//鼠标离开启动自动播放
		obox.onmouseout = function ()
		{
			autoPlay();
		};	
		//自动播放函数
		function autoPlay ()
		{
			play = setInterval(function () {
				orderAsc?index++:index--
				index>=imgs.length&&(index=imgs.length-2,orderAsc=false);
				index<=0&&(index=0,orderAsc=true);
				//index >= imgs.length && (index = 0);
				show(index);		
			},2000);	
		}
		autoPlay();//应用

		function show(a){
			var alpha=0;
			//按钮切换
			for (i=0;i<lis.length;i++) lis[i].className='';
			lis[a].className='current';
			clearInterval(timer);
			//透明度为0
			for (i = 0; i < imgs.length; i++){
				imgs[i].style.opacity = 0;
				imgs[i].style.filter = "alpha(opacity=0)";	
			}
			timer = setInterval(function () {
				alpha += 2;
				alpha > 100 && (alpha =100);
				imgs[a].style.opacity = alpha / 100;
				imgs[a].style.filter = "alpha(opacity = " + alpha + ")";
				alpha == 100 && clearInterval(timer)
			},50);

		}
	}
</script>
</body>
</html>